<script setup>
import { useUserStore } from '@/stores/user.js'
import { getLikeAPI } from '@/api/user.js'
import { ref, onMounted } from 'vue'
import ItemBox from '@/views/Home/component/ItemBox1.vue'
const likeList = ref()
const getLike = async () => {
  const res = await getLikeAPI({})
  likeList.value = res.data.result
}
onMounted(() => {
  getLike()
})
const userStore = useUserStore()
</script>
<template>
  <div class="my">
    <el-row class="head">
      <el-col :span="10" class="first">
        <el-image :src="userStore.userInfo.avatar" class="avatar"></el-image>
        <p>{{ userStore.userInfo.account }}</p></el-col
      >
      <el-col :span="12" class="second">
        <div>
          <el-icon><User /></el-icon>
          <p>会员中心</p>
        </div>
        <div>
          <el-icon><BellFilled /></el-icon>
          <p>安全设置</p>
        </div>
        <div>
          <el-icon><LocationFilled /></el-icon>
          <p>地址管理</p>
        </div>
      </el-col>
    </el-row>
    <h3>猜你喜欢</h3>
    <div class="like">
      <ItemBox
        v-model:item="likeList[index]"
        v-for="(item, index) in likeList"
        :key="item"
      />
    </div>
  </div>
</template>
<style lang="scss" scoped>
.my {
  :deep(.like) {
    display: flex !important;
  }
  .head {
    width: 100%;
    background-image: url('/assets/背景图.jpg');
    background-repeat: no-repeat;
    padding-top: 2%;
    .avatar {
      width: 20%;
    }
    .first {
      margin-left: 3%;
      display: flex;
      align-items: center;
    }
    .second {
      display: flex;
      justify-content: space-around;
      align-items: center;
      & > div {
        text-align: center;
        font-size: 20px;
        font-family: 加油鸭;
        p {
          margin: 0px;
        }
      }
    }
  }
}
</style>
